<script setup>
import {defineEmits, defineProps, onMounted, reactive, ref, watch} from "vue";
import {getParamSystemList} from '@/api/basal.js';
import {ResultEnums} from "@/enums/ResultStatusEnums.js";
const props = defineProps(['placeholder'])
const emit = defineEmits(['QueryParams'])
const content = reactive({keyword:'',systemCode:import.meta.env.VITE_SYSTEM_CODE})
const systems = ref([])
onMounted(() => {
  getParamSystemList().then(result => {
    if(result.code === ResultEnums.SUCCESS ){
      systems.value = result.data
    }
  })
})

watch(()=>content.systemCode,(newSystemCode,oldValue) => {
  emit('QueryParams',content)
})

function searchClick(e){
  e.preventDefault();
  emit('QueryParams',content)
}
</script>

<template>
  <div class="col-auto">
    <form class="table-search-form row gx-1 align-items-center">
      <div class="col-auto">
        <input type="text" id="search-orders" name="searchorders" class="form-control search-orders" v-model="content.keyword" :placeholder="props.placeholder" />
      </div>
      <div class="col-auto">
        <button type="submit" class="btn app-btn-secondary" @click="searchClick">查询</button>
      </div>
    </form>
  </div>
  <div class="col-auto" v-if="systems.length > 1">
    <select class="form-select w-auto" v-model="content.systemCode">
      <option :value="system.value" v-for="system in systems" :key="system.key">{{ system.key }}</option>
    </select>
  </div>
</template>

<style scoped>

</style>